import React from "react";
import { useNavigate } from "react-router-dom";
import { Tabs } from "antd-mobile";
import "./style.css";
import { MenuOutlined, SearchOutlined } from "@ant-design/icons";
import Main from "@/pages/Home/Main";

const Home: React.FC = () => {
  const navigate = useNavigate();
  return (
    <div>
      <div className={"tab"}>
        <div className={"tab-item"}>
          <MenuOutlined />
        </div>
        <div className={"tab-item"}>
          <span onClick={() => alert("关注")}>关注</span>
        </div>
        <div className={"tab-item"}>
          <span>发现</span>
        </div>
        <div className={"tab-item"}>
          <span onClick={() => alert("附近")}>附近</span>
        </div>
        <div className={"tab-item"}>
          <SearchOutlined />
        </div>
      </div>

      <div className={"tab-item"}>
        <Tabs
          defaultActiveKey="1"
          style={{
            "--title-font-size": "15px",
            "--active-line-height": "0px",
            "--active-title-color": "#ed2b43",
          }}
        >
          <Tabs.Tab title="推荐" key="1"></Tabs.Tab>
          <Tabs.Tab title="视频" key="2"></Tabs.Tab>
          <Tabs.Tab title="直播" key="3"></Tabs.Tab>
          <Tabs.Tab title="头像" key="4"></Tabs.Tab>
          <Tabs.Tab title="知识" key="5"></Tabs.Tab>
          <Tabs.Tab title="旅行" key="6"></Tabs.Tab>
          <Tabs.Tab title="护肤" key="7"></Tabs.Tab>
          <Tabs.Tab title="职场" key="8"></Tabs.Tab>
        </Tabs>
      </div>
      <Main></Main>
    </div>
  );
};

export default Home;
